<template>
  <view class="content bg-white p-4">
    <el-tabs v-model="activeName">
      <el-tab-pane label="用户列表" name="first">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column label="商家名称">
            <template v-slot="{ row }">
              <el-tooltip effect="dark" :content="row.ID_Name" placement="top">
                <view class="text-ellipsis w-100">
                  <text>{{ row.ID_Name }}</text>
                </view>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="加入时间">
            <template v-slot="{ row }">
              <el-tooltip
                effect="dark"
                :content="row.Authentication_Date"
                placement="top"
              >
                <view class="text-ellipsis w-100">
                  <text>{{ row.Authentication_Date }}</text>
                </view>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="Authentication" label="认证状态">
            <template v-slot="{ row }">
              <text v-if="row.Authentication == '1'">已认证</text>
            </template>
          </el-table-column>
          <el-table-column prop="Enterprise_Type" label="商家类型">
            <template v-slot="{ row }">
              <text>{{
                row.Enterprise_Type == "1" ? "企业商家" : "个体商家"
              }}</text>
            </template>
          </el-table-column>
          <el-table-column prop="User_Number" label="账号"> </el-table-column>
          <el-table-column label="身份">
            <template v-slot="{ row }">
              <text>{{ row.Admin_Type == "1" ? "管理员" : "普通成员" }}</text>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="address" label="操作">
            <template v-slot="{ row }">
              <view class="flex">
                <el-button
                  :loading="loading"
                  @click="update(row, 1)"
                  size="small"
                  type="primary"
                  class="btns"
                  >同意</el-button
                >
                <el-button
                  :loading="loading"
                  @click="update(row, 2)"
                  size="small"
                  type="danger"
                  class="btns"
                  >拒绝</el-button
                >
              </view>
            </template>
          </el-table-column> -->
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <view class="tab-button">
      <el-button type="success" class="btns" @click="handleClick"
        >加入/认证商家</el-button
      >
    </view>
  </view>
</template>

<script>
const app = getApp();
import { Message, MessageBox } from "element-ui";
import { getSystemUserID } from "@/api/group.js";
import { getEditAction, getInquiryIDOriginal } from "@/api/global.js";
export default {
  data() {
    return {
      activeName: "first",
      total: 0,
      tableData: [],
      loading: false,
      form: {
        User_Number: uni.getStorageSync("loginInfo").use,
        page: 1,
        limit: 10,
        token: uni.getStorageSync("loginInfo").token,
      },
    };
  },
  mounted() {
    this.form.User_Number = uni.getStorageSync("loginInfo").use;
    this.getList(this.form);
  },
  methods: {
    handleClick() {
      if (uni.getStorageSync("loginInfo") == "") {
        Message({
          type: "warning",
          message: "请先登录",
        });
        return;
      }
      if (uni.getStorageSync("loginInfo").authenticationType == "2") {
        Message({
          type: "warning",
          message: "您已经认证为个体商家",
        });
        return;
      }
      if (uni.getStorageSync("loginInfo").authenticationType == "3") {
        Message({
          type: "warning",
          message: "您已经认证为企业商家",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/index/authorizedShop",
      });
    },
    async getList(data) {
      console.log(data);
      const res = await getSystemUserID({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else if (res.Status == "success") {
        this.tableData = res.tableData;
        console.log(res);
        this.total = Number(res.limit);
      }
    },
    async update(row, i) {
      this.loading = true;
      let data = {
        Data: "system_user_info",
        Primary_Key_Name: "User_Number",
        Primary_Key: row.User_Number,
      };
      const res = await getInquiryIDOriginal({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      }
      console.log(res);
      res[0].Row_Status = i;
      let Data = {
        Data: JSON.stringify({
          Modify: {
            system_user_info: res,
          },
        }),
        token: uni.getStorageSync("loginInfo").token,
      };
      this.loading = false;
      this.getEdit(Data, i);
    },
    async getEdit(data, i) {
      const res = await getEditAction({
        data,
      });
      this.loading = false;
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else if (res.Status == "success") {
        if (i == 1) {
          Message({
            type: "success",
            message: "已同意",
          });
        } else {
          Message({
            type: "success",
            message: "已拒绝",
          });
        }
        this.getList(this.form);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;

  .btns:hover {
    background: #28a745;
  }

  .tab-button {
    position: absolute;
    top: 12px;
    right: 25px;

    .btns {
      background: #28a745;
    }

    .btns :hover {
      background: #28a745;
    }
  }
}
</style>